<!DOCTYPE html>
<html>
<head>
    <title>云浮汽车站班次查询</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="__PUBLIC__/Css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link href="__PUBLIC__/Css/my.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="__PUBLIC__/Js/my.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" charset="UTF-8"></script>
</head>

<body>

<div class="container" id="main">
    <!--top bar row-->
    <include file="Public:top" title="查询班次"/>
    <br>
    <!-- information row  -->
    <div class="row info">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <span>温馨提示：云浮汽车站微信购票系统</span>
        </div>
    </div>
    <br>

    <!-- form row -->
    <form action="{:U('Search/schedule')}" method="post" class="searchForm" id="searchForm" onsubmit="return checkForm()">
        <!--出发车站-->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center">
                <h4 style="display: inline">出发车站:</h4>
                <input type="text" class="textfield" style="" readonly value="{$json.data.defaultStation.station_name}"
                       id="start-station" name="start-station"/>
                <input type="text" id="start-station-code" name="start-station-code"
                       value="{$json.data.defaultStation.station_code}" hidden/>
                <img src="__PUBLIC__/images/forward-25.png" style="position:relative;left:-30px;">
            </div>
        </div>
        <br>
        <!--目标车站-->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center">
                <h4 style="display: inline">目标车站:</h4>
                <input type="text" class="textfield" id="end-station" name="end-station" readonly/>
                <img src="__PUBLIC__/images/forward-25.png" style="position:relative;left:-30px;">
                <input type="text" id="end-station-code" name="end-station-code" hidden/>
            </div>
        </div>
        <br>
        <!--乘车日期-->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center">
                <h4 style="display: inline">乘车日期:</h4>
                <input type="text" value="" id="datetimepicker" class="textfield" name="date" readonly>
                <img src="__PUBLIC__/images/forward-25.png" style="position:relative;left:-30px;">
            </div>
        </div>
        <!--错误提示-->
        <div class="row" style="display: none;" id="error-row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <img src="__PUBLIC__/images/arrow-right.png" style="visibility: hidden">
                <span class="error-hint" id="error-hint" style="color:red;"></span>
            </div>
        </div>

        <!--提交-->
        <div class="row" style="margin-top: 20px;">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center">
                <h4 style="display: inline;visibility: hidden">乘车日期:</h4>
                <input type="submit" class="submit" id="search" value="查询"/>
                <img src="__PUBLIC__/images/forward-25.png" style="position:relative;left:-30px;visibility: hidden">
            </div>
        </div>
    </form>

    <!--热门站点-->
    <div class="row" style="margin-top: 10px;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
             style="background-color: #3399ff;color:white;font-size: 17px;padding: 5px 0px 5px 10px;">
            <img src="__PUBLIC__/images/hot.png" style="margin-right: 5px;">
            热门站点
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="hot-area">
            <empty name="json.hotStation">
                <div style="font-size:18px;margin-top:20px;color:gray;" align="center">无热门站点</div>
                <else/>
                <foreach name="json.hotStation" item="station">
                    <div class="hot-div" id="{$station.node_code}" onclick="onHotStationClick(this)">{$station.node_cname}
                    </div>
                </foreach>
            </empty>
        </div>
    </div>
</div>

<!-- 出发车站弹出框-->
<div class="modal" id="start-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     style="position:absolute;top:15%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399FF;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择出发车站</h4>
            </div>
            <div class="modal-body"
                 style="height:250px;border: none;overflow: auto;padding-top:5px;padding-bottom: 5px;">
                <ul id="start-ul">
                    <empty name="json.data.list">
                        <li class="sel-item" align="center">
                            无相关数据
                        </li>
                        <else/>
                        <foreach name="json.data.list" item="station">
                            <li class="sel-item" id="{$station.station_code}" onclick="onStartStationClick(this)">{$station.station_name}
                            </li>
                        </foreach>
                    </empty>
                </ul>
            </div>
            <div class="modal-footer" style="padding: 10px 10px 10px 0px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 目的车站弹出框 -->
<div class="container" id="end-dialog" style="display: none;width: 100%;height:100%;">
    <div class="row" style="background-color: #3399ff;padding: 5px 0px 5px 0px;">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="left" style="padding-left: 3px;">
            <img src="__PUBLIC__/images/back-white.png" id="back-dialog" align="center">
        </div>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" align="center">
            <input type="text" id="end-input" placeholder="请输入目的车站"
                   style="width:100%;height:37px;border: none;border-radius: 5px;padding-left: 5px;">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="center">
            <div id="end-search" style="font-size: 100%;font-weight: bold;color: white;height:37px; line-height: 37px;"
                 onclick="onSearch()">搜索
            </div>
        </div>
    </div>
    <!--最近选择-->
    <script>
    </script>
    <div class="row history">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="row gray-bar">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4>最近选择</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <ul style="padding: 0px;" id="history-ul">
                        <!--加载最近选择-->
                        <script>
                            if (localStorage.searchHistory) {
                                var json = JSON.parse(localStorage.searchHistory);
                                var historyUl = document.getElementById("history-ul");
                                for (var i = json.length - 1; i >= 0; i--) {
                                    //alert(json[i].stationCode + "," + json[i].stationName);
                                    var li = document.createElement("li");
                                    li.setAttribute("class", "sel-item");
                                    li.setAttribute("id", json[i].stationCode);
                                    var liText = document.createTextNode(json[i].stationName);
                                    li.appendChild(liText);
                                    li.setAttribute("onclick", "onStationClick(this)");
                                    historyUl.appendChild(li);
                                }
                                var delLi = document.createElement("li");
                                delLi.setAttribute("class", "sel-item");
                                delLi.setAttribute("align", "center");
                                var divDel = document.createElement("div");
                                divDel.setAttribute("style", "color:gray;margin-left:25%;width:50%;padding:5px;background-color:#EEEEEE;border-radius:5px;");
                                divDel.setAttribute("onclick", "onDelHistory()");
                                var divText = document.createTextNode("清楚历史记录");
                                divDel.appendChild(divText);
                                delLi.appendChild(divDel);
                                historyUl.appendChild(delLi);
                            } else {
                                var historyUl = document.getElementById("history-ul");
                                var li = document.createElement("li");
                                li.setAttribute("class", "sel-item");
                                li.setAttribute("style", "color:gray");
                                li.setAttribute("align", "center");
                                var liText = document.createTextNode("无搜索记录");
                                li.appendChild(liText);
                                historyUl.appendChild(li);
                            }

                        </script>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--tab-->
    <div class="row history">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="row gray-bar" align="center">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 search-tab-active" id="sel-area"
                     onclick="onSearchTabItemClick('area')">
                    <h4>按地区选择</h4>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="sel-char" onclick="onSearchTabItemClick('char')">
                    <h4>按字母选择</h4>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="sel-hot" onclick="onSearchTabItemClick('hot')">
                    <h4>热门站点</h4>
                </div>
            </div>
            <!--地区-->
            <div class="row" id="area-content">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <ul style="padding: 0px;" class="xable" id="pvUl">
                    </ul>
                </div>
            </div>
            <!--字母-->
            <div class="row" id="char-content" style="display: none;">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <ul style="padding: 0px;" id="char-ul">
                    </ul>
                </div>
            </div>
            <!--热门-->
            <div class="row" id="hot-content" style="display: none;">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <ul style="padding: 0px;" id="hot-ul">
                        <empty name="json.hotStation">
                            <li class="sel-item" align="center">无热门站点</li>
                            <else/>
                            <foreach name="json.hotStation" item="station">
                                <li class="sel-item" id="{$station.node_code}" onclick="onStationClick(this)">{$station.node_cname}
                                </li>
                            </foreach>
                        </empty>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 搜索结果框 -->
<div class="modal fade" id="result-dialog" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" style="position:absolute;top:15%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399ff;padding: 5px;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">搜索结果</h4>
            </div>
            <div class="modal-body"
                 style="height:250px;border: none;overflow: auto;padding-top:10px;padding-bottom: 5px;">
                <ul id="result-ul">
                </ul>
            </div>
            <div class="modal-footer" style="padding: 5px;margin-top: 0px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--可用日期-->
<input type="hidden" value="30" id="useable-date-count">

<script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/Js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<!-- 加载热门车站 -->

<script type="text/javascript">

    $("#end-input").val("");

    $("#datetimepicker").val(getCurrentDate());

    $('#datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        minView: 'month',
        autoclose: true,
        forceParse: true,
        startDate: new Date(),
        endDate: GetEndDate(parseInt($("#useable-date-count").val())),
        keyboardNavigation: true,
        todayBtn: 'linked'
    });

    $('#datetimepicker').bind({
        click: function () {
            $("#error-hint").html("");
            hideErrorHint();
        }
    });

    $("#start-station").bind({
        click:function(){
            hideErrorHint();
            showStartStationDialog();
        }
    });

    $("#end-station").bind({
        click: function () {
            hideErrorHint();
            showEndStationDialog();

        }
    });

    $("#back-dialog").bind({
        click: function () {
            hideEndStationDialog();
        }
    });

    /**
     * 根据省份加载城市列表
     * */
    function loadCity(pvCode) {
        var pvUl = document.getElementById("pvUl");
        var cityUl = document.createElement("ul");
        //<ul style="padding:10px 0px 0px 5px;display: none;" id="guangdong-content">
        cityUl.setAttribute("style", "padding:10px 0px 0px 5px;");
        cityUl.setAttribute("id", pvCode + "-content");
        cityUl.setAttribute("class", pvCode);

        $.ajax({
            type: "POST",
            url: "{:U('Search/city')}",
            data: "province_code=" + pvCode + "&stationCode=" + $("#start-station-code").val(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "json",
            success: function (json) {
                var cityList = json.data.list;
                if (cityList.length == 0) {
                    cityUl.appendChild(getHintLi("无相关数据"));
                } else {
                    $.each(cityList, function (index, city) {
                        var cityLi = document.createElement("li");
                        cityLi.setAttribute("class", "sel-item city");
                        cityLi.setAttribute("onclick", "onCityClick('" + city.city_code + "')");
                        cityLi.setAttribute("id", city.city_code);
                        var cityText = document.createTextNode(city.city_name);
                        var cityImg = document.createElement("img");
                        cityImg.setAttribute("src", "__PUBLIC__/images/forward-25.png");
                        cityImg.setAttribute("style", "float:right;");
                        cityLi.appendChild(cityText);
                        cityLi.appendChild(cityImg);
                        cityUl.appendChild(cityLi);
                        insertAfter(cityUl, document.getElementById(pvCode + "-head"));
                    });
                }
            },
            error: function (msg) {
                var li = getHintLi('加载数据失败，请检查网络');
                li.setAttribute(pvCode + "-content");
                cityUl.appendChild(li);
            }
        });
    }

    /**
     * 根据城市代码查找站点
     *
     * */
    function loadStationWithCityCode(cityCode) {
        var cityLi = $("#" + cityCode);
        var parent = cityLi.parent();
        var pvCode = parent.attr("class");
        var stationUl = document.createElement("ul");
        //<ul style="padding:10px 0px 0px 5px;" id="guangzhou-content">
        stationUl.setAttribute("style", "padding:0px 0px 0px 5px;");
        stationUl.setAttribute("id", cityCode + "-content");
        //alert(pvCode+","+cityCode);
        $.ajax({
            type: "POST",
            url: "{:U('Search/station')}",
            data: "province_code=" + pvCode + "&city_code=" + cityCode + "&stationCode=" + $("#start-station-code").val(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "json",
            success: function (json) {
                var stationList = json.data.list;
                //alert(stationList.length);
                $.each(stationList, function (index, station) {
                    var stationLi = document.createElement("li");
                    stationLi.setAttribute("class", "sel-item city");
                    stationLi.setAttribute("onclick", "onStationClick(this)");
                    stationLi.setAttribute("id", station.node_code);
                    var stationText = document.createTextNode(station.node_cname);
                    stationLi.appendChild(stationText);
                    stationUl.appendChild(stationLi);
                });
                //alert(stationUl.innerHTML);
                insertAfter(stationUl, document.getElementById(cityCode));
            },
            error: function (msg) {
                alert('加载数据失败，请检查网络');
            }
        });
    }

    /**
     * 根据首字母查找站点
     * */
    function loadStationWithChar(char) {
        var charLi = document.getElementById(char.id);
        var stationUl = document.createElement("ul");
        stationUl.setAttribute("style", "padding:0px 0px 0px 5px;");
        stationUl.setAttribute("id", char.id + "-content");
        $.ajax({
            type: "POST",
            data: "char=" + char.id + "&stationCode=" + $("#start-station-code").val(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            url: "{:U('Search/char')}",
            dataType: "json",
            success: function (json) {
                var stationList = json.data.list;
                //alert(stationList.length);
                if (stationList.length == 0) {
                    stationUl.appendChild(getHintLi("无相关站点..."));
                }
                $.each(stationList, function (index, station) {
                    var stationLi = document.createElement("li");
                    stationLi.setAttribute("class", "sel-item city");
                    stationLi.setAttribute("onclick", "onStationClick(this)");
                    stationLi.setAttribute("id", station.node_code);
                    var stationText = document.createTextNode(station.node_cname);
                    stationLi.appendChild(stationText);
                    stationUl.appendChild(stationLi);
                });
                insertAfter(stationUl, document.getElementById(char.id));
            },
            error: function (msg) {
                var li = getHintLi("加载出错啦...");
                li.setAttribute("id", char.id + "-content");
                insertAfter(li, document.getElementById(char.id));
            }
        });
    }

    /**
     * 在newElement后面插入targetElement
     * @param newElement
     * @param targetElement
     */
    function insertAfter(newElement, targetElement) { // newElement是要追加的元素 targetElement 是指定元素的位置
        var parent = targetElement.parentNode; // 找到指定元素的父节点
        if (parent.lastChild == targetElement) { // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
            parent.appendChild(newElement, targetElement);
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }

    /**
     * 点击省份事件
     * @param pvCode
     */
    function onProvinceClick(pvCode) {
        if ($("#" + pvCode + "-content").length == 0) {
            loadCity(pvCode);
            $("#" + pvCode + "-head > img").attr("src", "__PUBLIC__/images/down-arrow-25.png");
        } else {
            var src = $("#" + pvCode + "-head > img").attr("src");
            if (src == '__PUBLIC__/images/down-arrow-25.png') {
                //alert(pvCode + "收缩");
                $("#" + pvCode + "-content").css("display", "none");
                $("#" + pvCode + "-head > img").attr('src', '__PUBLIC__/images/forward-25.png');
            } else {
                //alert(pvCode + "张开");
                $("#" + pvCode + "-content").css("display", "");
                $("#" + pvCode + "-head > img").attr('src', '__PUBLIC__/images/down-arrow-25.png');
            }
        }
    }

    /**
     * 点击城市事件
     * @param cityCode
     */
    function onCityClick(cityCode) {

        if ($("#" + cityCode + "-content").length == 0) {
            loadStationWithCityCode(cityCode);
            $("#" + cityCode + " > img").attr("src", "__PUBLIC__/images/down-arrow-25.png");
        } else {
            var src = $("#" + cityCode + " > img").attr("src");
            if (src == '__PUBLIC__/images/down-arrow-25.png') {
                //alert(pvCode + "收缩");
                $("#" + cityCode + "-content").css("display", "none");
                $("#" + cityCode + " > img").attr('src', '__PUBLIC__/images/forward-25.png');
            } else {
                //alert(pvCode + "张开");
                $("#" + cityCode + "-content").css("display", "");
                $("#" + cityCode + " > img").attr('src', '__PUBLIC__/images/down-arrow-25.png');
            }
        }
    }

    /**
     * 点击目标站点事件
     * @param station
     */
    function onStationClick(station) {
        var stationCode = station.id;
        var stationName = station.innerHTML;
        $("#end-station-code").val(stationCode);//赋值站点名
        $("#end-station").val(stationName);//赋值站点代码
        $("#end-dialog").css("display", "none");//隐藏框
        $("#result-dialog").modal('hide');
        $("#main").css("display", "");//显示主界面
        //保存搜索记录到localStorage
        if (!localStorage.searchHistory) {
            var json = [
                {"stationCode": station.id, "stationName": station.innerHTML}
            ]
            localStorage.searchHistory = JSON.stringify(json);
        } else {
            var json = JSON.parse(localStorage.searchHistory);
            for (var i = 0; i < json.length; i++) {
                //判断本地缓存是否已存在该搜索项
                if (json[i].stationCode == station.id) {
                    json.splice(i, 1);
                }
            }
            json[json.length] = {"stationCode": station.id, "stationName": station.innerHTML};
            localStorage.searchHistory = JSON.stringify(json);
        }
        //清楚页面中的搜索记录
        clearSearchResult();
    }

    /**
     * 点击出发站点事件
     * @param station
     */
    function onStartStationClick(station) {
        var stationCode = station.id;
        var stationName = station.innerHTML;
        $("#start-station").val(stationName);
        $("#start-station-code").val(stationCode);
        hideStartStationDialog();

        //更新底部热门站点DIV和框里的热门站点列表
        clearHot();
        loadHot();
    }

    /**
     * 加载省份
     * */
    function loadProvince() {
        var pvUl = document.getElementById("pvUl");
        $.ajax({
            type: "POST",
            url: "{:U('Search/province')}",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: "stationCode=" + $("#start-station-code").val(),
            dataType: "json",
            success: function (json) {
                var pvList = json.data.list;
                if (pvList.length == 0) {
                    pvUl.appendChild(getHintLi("无相关数据"));
                } else {
                    $.each(pvList, function (index, pv) {
                        var pvLi = document.createElement("li");
                        pvLi.setAttribute("class", "sel-item province");
                        pvLi.setAttribute("onclick", "onProvinceClick('" + pv.province_code + "')");
                        pvLi.setAttribute("id", pv.province_code + "-head");
                        var pvText = document.createTextNode(pv.province_name);
                        var pvImg = document.createElement("img");
                        pvImg.setAttribute("src", "__PUBLIC__/images/forward-25.png");
                        pvImg.setAttribute("style", "float:right");
                        pvLi.appendChild(pvText);
                        pvLi.appendChild(pvImg);
                        //增加节点
                        pvUl.appendChild(pvLi);
                    });
                }
            },
            error: function (msg) {
                pvUl.appendChild(getHintLi("加载出错啦..."));
            }
        });
    }

    function loadHot() {
        var hotUl = document.getElementById("hot-ul");
        var hotArea = document.getElementById("hot-area");

        $.ajax({
            type: "POST",
            url: "{:U('Search/hot')}",
            data: "stationCode=" + $("#start-station-code").val(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "json",
            success: function (json) {
                var stationList = json.data.list;
                //alert(stationList.length);
                if (stationList.length == 0) {
                    hotUl.appendChild(getHintLi("无相关站点"));
                    hotArea.appendChild(getHintDiv("无相关站点"));
                } else {
                    //alert(json.data.list.length);
                    $.each(stationList, function (index, station) {
                        //alert(getHotDivItem(station.node_code, station.node_name));
                        hotUl.appendChild(getLiItem(station.node_code, station.node_cname));
                        hotArea.appendChild(getHotDivItem(station.node_code, station.node_cname));
                    });
                }
            },
            error: function (msg) {
                hotUl.appendChild(getHintLi("加载出错啦..."));
                hotArea.appendChild(getHintDiv("加载出错啦..."));
            }
        });
    }

    /**
     * 加载字母
     * */
    function loadChar() {
        var asciiOfA = "A".charCodeAt();
        var charUl = document.getElementById("char-ul");
        for (var i = 0; i < 26; i++) {
            var char = String.fromCharCode(asciiOfA + i);
            var li = document.createElement("li");
            li.setAttribute("class", "sel-item province");
            li.setAttribute("id", char);
            li.setAttribute("onclick", "onCharClick(this)");
            var text = document.createTextNode(char);
            li.appendChild(text);
            var img = document.createElement("img");
            img.setAttribute("src", "__PUBLIC__/images/forward-25.png");
            img.setAttribute("style", "float:right;");
            li.appendChild(img);
            charUl.appendChild(li);
        }
    }

    /**
     * 清楚页面搜索记录
     * */
    function clearSearchResult() {
        var searchResultUl = document.getElementById("result-ul");
        searchResultUl.innerHTML = "";
    }

    /**
     * 点击字母事件
     * @param char
     */
    function onCharClick(char) {
        if ($("#" + char.id + "-content").length == 0) {
            loadStationWithChar(char);
            $("#" + char.id + " > img").attr("src", "__PUBLIC__/images/down-arrow-25.png");
        } else {
            var src = $("#" + char.id + " > img").attr("src");
            if (src == '__PUBLIC__/images/down-arrow-25.png') {
                //alert(pvCode + "收缩");
                $("#" + char.id + "-content").css("display", "none");
                $("#" + char.id + " > img").attr('src', '__PUBLIC__/images/forward-25.png');
            } else {
                //alert(pvCode + "张开");
                $("#" + char.id + "-content").css("display", "");
                $("#" + char.id + " > img").attr('src', '__PUBLIC__/images/down-arrow-25.png');
            }
        }
    }

    /**
     * 点击最近搜索
     * @param char
     */
    function onDelHistory() {
        var historyUl = document.getElementById("history-ul");
        historyUl.innerHTML = "";
        var li = document.createElement("li");
        li.setAttribute("class", "sel-item");
        li.setAttribute("style", "color:gray");
        li.setAttribute("align", "center");
        var liText = document.createTextNode("无相关数据");
        li.appendChild(liText);
        historyUl.appendChild(li);
        localStorage.searchHistory = "";
    }

    function onSearch() {
        var keyword = $("#end-input").val().trim();
        if (keyword == "") {
            return;
        }
        var resultStationUl = document.getElementById("result-ul");
        $.ajax({
            type: "POST",
            url: "{:U('Search/doSearch')}",
            data: "keyword=" + keyword + "&stationCode=" + $("#start-station-code").val(),
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                var stationList = json.data.list;
                if (stationList.length == 0) {
                    var li = document.createElement("li");
                    li.setAttribute("class", "sel-item");
                    li.setAttribute("align", "center");
                    var liText = document.createTextNode('未找到与"' + keyword + '"相关的站点');
                    li.appendChild(liText);
                    resultStationUl.appendChild(li);
                } else {
                    $.each(stationList, function (index, station) {
                        var li = document.createElement("li");
                        li.setAttribute("class", "sel-item");
                        li.setAttribute("id", station.node_code);
                        li.setAttribute("onclick", "onStationClick(this)");
                        var liText = document.createTextNode(station.node_cname);
                        li.appendChild(liText);
                        resultStationUl.appendChild(li);
                    });
                }
            },
            error: function (msg) {
                var li = document.createElement("li");
                li.setAttribute("class", "sel-item");
                li.setAttribute("align", "center");
                var liText = document.createTextNode("搜索失败，请检查网络");
                li.appendChild(liText);
                resultStationUl.appendChild(li);
            }
        });

        $("#result-dialog").modal('show');
    }

    /**
     * 点击热门站点，直接跳转到班次页面
     */
    function onHotStationClick(station) {
        $("#end-station").val(station.innerHTML);
        $("#end-station-code").val(station.id);
        $("#searchForm").submit();
    }

    $("#result-dialog").on("hidden.bs.modal", function () {
        clearSearchResult();
    });

    function onHistoryItemClick(item) {
        $("#end-input").val(item);
    }
</script>
</body>
</html>
